<template>
    <div style="padding: 10px">
        <div>
            <el-radio-group v-model="scoring" size="large" style="margin: 20px 0">
                <el-radio-button label="个人打分" @click="scoring1"/>
                <el-radio-button label="团队打分" @click="scoring2">
                    <div class="el-radio-button">团队打分</div>
                </el-radio-button>
            </el-radio-group>
        </div>
        <div style="margin: 10px 0px">
            <el-input v-model="page.param.team_name" placeholder="请输入姓名" style="width: 20%" clearable></el-input>
            <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
            <el-button type="info" style="margin-left: 5px" @click="reset">重置</el-button>
<!--            <el-button type="warning" style="padding-right:10px" @click="add">新增</el-button>-->
        </div>
        <div>
        <el-table :data="state.tableData" border stripe style="width:90%" :header-cell-style="{
      background:'#b1b3b8',height:'50px',color:'#000000',border: '1px solid tan'}">
            <el-table-column prop="teamId" label="ID" width="100" align="center"/>
            <el-table-column prop="teamName" label="队名" width="AUTO" align="center"/>
            <el-table-column prop="teamRecode" label="团队分数" width="AUTO" align="center"/>
            <!--      <el-table-column prop="wordId" label="留言ID" width="100"/>-->
            <el-table-column prop="state" label="状态" width="AUTO" align="center"/>
            <el-table-column label="操作" align="center" width="AUTO">
                <template #default="scope">
                    <el-button  type="primary" @click="handleEdit(scope.row)">编辑</el-button>
<!--                    <el-popconfirm title="确认删除吗？" @confirm="handleDelete(scope.row.teamId)">-->
<!--                        <template #reference>-->
<!--                            <el-button  type="danger" >删除</el-button>-->
<!--                        </template>-->
<!--                    </el-popconfirm>-->
                </template>
            </el-table-column>
        </el-table>
        </div>
        <div style="padding: 10px">
            <el-pagination
                background
                v-model:current-page="page.pageNum"
                v-model:page-size="page.pageSize"
                :page-sizes="[5, 10, 15]"
                large
                :disabled="false"
                layout="total, sizes, prev, pager, next, jumper"
                :total="state.total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
        <el-dialog v-model="dialogVisible" title="团队信息" width="30%">
            <el-form label-width="120px" :model="state.form" :rules="state.rules" ref="rulesFormRef">
                <el-form-item label="队名" prop="teamName" >
                    <el-input v-model="state.form.teamName" disabled placeholder="请输入团队名称" style="width: 80%" />
                </el-form-item>
                <el-form-item label="团队分数" prop="teamRecode">
                    <el-input v-model="state.form.teamRecode" placeholder="请输入团队分数" style="width: 80%" />
                </el-form-item>
                <!--        <el-form-item label="留言ID" prop="wordId">-->
                <!--          <el-input v-model="state.form.wordId" placeholder="请输入留言ID" style="width: 80%" />-->
                <!--        </el-form-item>-->
                <el-form-item label="状态" prop="state">
                    <el-input v-model="state.form.state" placeholder="请输入团队状态" style="width: 80%" />
                </el-form-item>
                <!--        <el-form-item label="学生分数" prop="stuRecode">-->
                <!--          <el-input v-model="state.form.stuRecode" placeholder="请输入学生分数" style="width: 80%" />-->
                <!--        </el-form-item>-->
                <!--        <el-form-item label="教师密码">-->
                <!--          <el-input v-model="state.form.teaPwd" placeholder="123456" disabled style="width: 80%" />-->
                <!--        </el-form-item>-->
            </el-form>
            <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="save">确定</el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {getCurrentInstance, reactive, ref} from "vue";
import request from "@/request";
import {ElMessage, ElNotification} from "element-plus";
import router from "@/router";
const { proxy }=getCurrentInstance()
function scoring1() {
    router.push({path: '/teacher/scoring_tea'})
}
function scoring2() {
    router.push({path: '/teacher/teamscoring_tea'})
}
const load = () => {
    request.post('/team/listPage',JSON.stringify(page)).then(res=>{
        if(res.code===200) {
            state.tableData = res.data
            state.total=res.total
        }
    })
}

const page=reactive({
    pageNum:ref(1),
    pageSize:ref(10),
    param:{
        team_name:ref()
    }
})
//刷新页面
load()
//页数
const handleSizeChange=(val)=>{
    page.pageSize=val
    load()
}
//每页数量
const handleCurrentChange=(val)=>{
    page.pageNum=val
    load()
}

const reset=()=>{
    page.param.team_name="";
    load()
}
const dialogVisible=ref(false)
const add=()=>{
    dialogVisible.value=true;
    // state.form={
    //   teaPwd:"123456"
    // } //清空数据，并设置初始密码为123456

}
const handleEdit=(row)=>{

    state.form=JSON.parse(JSON.stringify(row))

    dialogVisible.value=true;
}
const save=()=>{
    proxy.$refs.rulesFormRef.validate((valid)=>{
        if(valid){
            if(state.form.teamId){
                request.post('/team/update',JSON.stringify(state.form)).then(res=>{
                    if(res.code===200){
                        ElNotification({
                            type:"success",
                            message:"修改成功"
                        })
                        dialogVisible.value=false;
                        load();
                    }
                })
            }else {
                console.log(JSON.stringify(state.form))
                request.post('/team/save',JSON.stringify(state.form)).then(res=>{
                    if(res.code===200){
                        ElNotification({
                            type:"success",
                            message:"删除成功"
                        })
                        dialogVisible.value=false;
                        load();
                    }
                })
            }
        }else{
            ElMessage({
                type:"error",
                message:'请填写完整！'
            })
        }
    })
}

const handleDelete=(teamId)=>{
    request.get('/team/del',{params:{team_id:teamId}}).then(res=>{
        if(res.code===200){
            ElNotification({
                type:"success",
                message:"删除成功"
            })
            load()
        }
    })
}

//数据
const state = reactive({
    tableData: [],
    total:0,
    form:{},
    rules:{
        teamName: [
            { required: true, message: '请输入团队名称', trigger: 'blur' },
        ],
        teamRecode: [
            { required: true, message: '请输入团队得分', trigger: 'blur' },
        ],
        // wordId: [
        //   { required: true, message: '请输入留言ID', trigger: 'blur' },
        // ],
        state: [
            { required: true, message: '请输入团队目前状态', trigger: 'blur' },
        ],
        // stuRecode: [
        //   { required: true, message: '请输入学生分数', trigger: 'blur' },
        // ],
    }
})

</script>

<style scoped>
.el-radio-button{
    color: #409EFF;
}
</style>
